<template>
  <div>
    <div class="head">
      <div class="input">
        <span>课程名称：</span>
        <el-input v-model="queryData.course_name" placeholder="请输入课程名称" />
      </div>
      <div class="input">
        <span>培训类型：</span>
        <el-cascader
          :show-all-levels="false"
          :options="options2"
          v-model="queryData.selected_type_ids"
          :props="{ multiple: true, checkStrictly: true, label: 'title', value: 'id' }"
          clearable
        ></el-cascader>
      </div>
      <div class="input">
        <span>发布时间：</span>
        <el-date-picker
          v-model="queryData.date"
          type="daterange"
          range-separator="至"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <el-button type="primary" class="btn" @click="search">查询</el-button>
      <el-button type="primary" class="btn" @click="reset">重置</el-button>
      <el-button type="primary" class="btn" @click="add">新增课程</el-button>
    </div>
    <div class="box">
      <el-table
        :data="tableData"
        border
        v-loading="isTableLoading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        style="width: 100%"
        :max-height="tableHeight"
      >
        <el-table-column fixed type="index" align="center" label="序号" width="50" />
        <el-table-column
          fixed
          prop="course_name"
          align="center"
          show-overflow-tooltip
          label="课程名称"
          min-width="140"
        />
        <el-table-column prop="ware_duration" align="center" label="课时(分)" min-width="130" />
        <el-table-column prop="ware_count" align="center" label="课件数量" min-width="100"></el-table-column>
        <el-table-column prop="resource_type" align="center" label="课件来源" min-width="100">
          <template #default="scope">
            <span v-if="scope.row.resource_type == 1">公共资源</span>
            <span v-else-if="scope.row.resource_type == 2">平台资源</span>
            <span v-else-if="scope.row.resource_type == 3">我的资源</span>
          </template>
        </el-table-column>
        <el-table-column prop="type_name" align="center" label="培训类型" min-width="140"></el-table-column>
        <el-table-column prop="course_type" align="center" label="课程类型" min-width="140">
          <template #default="scope">
            {{scope.row.course_type == 1 ? '公共课' : '专业课'}}
          </template>
        </el-table-column>
        <el-table-column prop="require_type" align="center" label="选修类型" min-width="140">
          <template #default="scope">
            {{scope.row.require_type == 1 ? '必修课' : '选修课'}}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" align="center" label="创建时间" min-width="140"></el-table-column>
        <el-table-column fixed="right" align="center" prop="action" label="操作" width="160">
          <template #default="scope">
            <div class="action">
              <span @click="edit(scope.row, 2)">查看</span>
              <span @click="edit(scope.row, 1)">编辑</span>
              <span @click="delOk(scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      background
        style="margin-top: 5px;text-align: right;"
        @size-change="search"
        @current-change="getList"
        :current-page.sync="queryData.page"
        :page-size.sync="queryData.size"
        layout="total, prev, pager, next,sizes,jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
import { CourseList, TrainTypeTree, CourseDelete } from '@/api/manage';
export default {
  name: 'cultivate',
  data() {
    return {
      tableHeight: 500,
      queryData: {
        course_name: '',
        create_type: 2,
        selected_type_ids: [],
        type_ids: [],
        date: [],
        end_time: '',
        start_time: '',
        page: 1,
        size: 10,
        resource_type: 3, // 3:公共资源
      },
      total: 0,
      isTableLoading: false,
      tableData: [],
      dialogVisible: false,
      isShowTest: false,
      ruleForm: {
        testId: '',
        name: '',
        qualified: null,
        makeUp: 0,
        number: null,
        radio: null,
        radioScore: null,
        multi: null,
        multiScore: null,
        few: null,
        judge: null,
        judgeScore: null,
      },
      rules: {
        name: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }],
        qualified: [{ required: true, message: '请输入合格分数', trigger: 'blur' }],
        radio: [{ required: true, message: '请输入单选题数量', trigger: 'blur' }],
        radioScore: [{ required: true, message: '请输入单选题分数', trigger: 'blur' }],
        multi: [{ required: true, message: '请输入多选题数量', trigger: 'blur' }],
        multiScore: [{ required: true, message: '请输入多选题每题分数', trigger: 'blur' }],
        few: [{ required: true, message: '请输入少选，所选的每个选项', trigger: 'blur' }],
        judge: [{ required: true, message: '请输入判断题数量', trigger: 'blur' }],
        judgeScore: [{ required: true, message: '请输入判断题每题分数', trigger: 'blur' }],
        makeUp: [{ required: true, message: '请选择补考次数', trigger: 'change' }],
        testId: [{ required: true, message: '请选择试卷', trigger: 'change' }],
      },
      options2: [],
    };
  },
  watch: {
    'queryData.selected_type_ids'(newValue, oldValue) {
      if (this.queryData.selected_type_ids.length > 0) {
        this.queryData.type_ids = [];
        this.queryData.selected_type_ids.forEach((item) => {
          this.queryData.type_ids.push(item[item.length - 1]);
        });
      } else {
        this.queryData.type_ids = [];
      }
    },
    'queryData.date': {
      handler(newValue, oldValue) {
        if (newValue?.length) {
          this.queryData.start_time = newValue[0];
          this.queryData.end_time = newValue[1];
        } else {
          this.queryData.start_time = '';
          this.queryData.end_time = '';
        }
      },
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260;
    });
    this.getList();
    this.getTrainTypeTree();
  },
  methods: {
    edit(item, type) {
      this.$router.push({
          path: '/company/addCourse/index',
          query: { create_type: 2,id: item.id,type:type },
        });
    },
    search() {
      this.queryData.page = 1;
      this.getList();
    },
    reset() {
      this.queryData.course_name = '';
      this.queryData.selected_type_ids = [];
      this.queryData.date = [];
      this.search();
    },
    del(item) {
      this.dialogVisible = true;
      this.item = item;
    },
    delOk(item) {
      this.$confirm('确定删除该课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        CourseDelete({ id: item.id }).then((res) => {
          this.$message.success('删除成功');
          this.getList();
        });
      });
    },
    setTest() {
      this.isShowTest = true;
    },
    add() {
      this.$router.push({
        path: '/company/addCourse/index',
        query: { create_type: 2, resource_type: this.queryData.resource_type }, // 3: 我的资源
      });
    },
    getList() {
      this.isTableLoading = true;
      CourseList(this.queryData).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.isTableLoading = false;
      });
    },
    getTrainTypeTree() {
      TrainTypeTree().then((res) => {
        this.options2 = res.data.list;
      });
    },
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  padding-bottom: 0px;
}
.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}
.input > span {
  font-size: 12px;
  flex-shrink: 0;
}
.btn {
  margin-bottom: 20px;
}
.box {
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.demo-ruleForm /deep/ .el-form-item__label {
  line-height: 14px;
}
</style>
